<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>

    <style>

        .u2{
            display: none;
            position: fixed;
        }

        .u2>li{
            list-style: none;
        }

        .u1>li{
            list-style: none;
            float:left;
            margin-left: 40px;
        }

        /* 当一级菜单获得焦点关注时，二级菜单展示出来 */
        .u1>li:hover .u2{
            display: block;
        }

    </style>

</head>
<body>

    <ul class="u1">
        <li>奶茶
            <ul class="u2">
                <li>波波奶茶</li>
                <li>香芋奶茶</li>
                <li>奶茶三兄弟</li>
            </ul>
        </li>
        <li>果茶
            <ul class="u2">
                <li>葡萄多多</li>
                <li>草莓多多</li>
                <li>芒果多多</li>
            </ul>
        </li>
        <li>咖啡
            <ul class="u2">
                <li>拿铁咖啡</li>
                <li>美式咖啡</li>
                <li>澳瑞白</li>
            </ul>
        </li>
    </ul>

</body>
</html>